<template>
  <div class="app-container">
    <Search-content :queryParams="queryParams" labelWidth="120px" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="车牌号:">
          <el-input v-model="queryParams.carNo" clearable placeholder="请输入车牌号"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车架号:">
          <el-input v-model="queryParams.vinNo" clearable placeholder="请输入车架号"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车辆产权:">
          <el-select filterable v-model="queryParams.propertyRightId" clearable placeholder="请选择车辆归属"
                     style="width: 100%">
            <el-option v-for="item in companyOriginList" :label="item.deptName" :value="item.deptId"
                       :key="item.deptId"/>
          </el-select>
        </el-form-item>
      </el-col>
      <!--      <el-col :span="6">-->
      <!--        <el-form-item label="交强险保险生效日:">-->
      <!--          <el-date-picker v-model="jqxTime" type="daterange" range-separator="-" unlink-panels start-placeholder="开始日期"-->
      <!--            end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable @change="changeDate(jqxTime,1)">-->
      <!--          </el-date-picker>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <!--      <el-col :span="6">-->
      <!--        <el-form-item label="商业险保险生效日:">-->
      <!--          <el-date-picker v-model="syxTime" type="daterange" range-separator="-" unlink-panels start-placeholder="开始日期"-->
      <!--            end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable @change="changeDate(syxTime,2)">-->
      <!--          </el-date-picker>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col :span="6">
        <el-form-item label="交强险保险状态:">
          <el-select v-model="queryParams.compulsoryInsuranceStatus" placeholder="请选择交强险保险状态"
                     style="width: 100%;">
            <el-option v-for="v in dict.type.amortization_status" :key="v.value" :label="v.label"
                       :value="Number(v.value)"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="商业险保险状态:">
          <el-select v-model="queryParams.commercialInsuranceStatus" placeholder="请选择商业险保险状态"
                     style="width: 100%;">
            <el-option v-for="v in dict.type.amortization_status" :key="v.value" :label="v.label"
                       :value="Number(v.value)"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="日期:">
          <el-date-picker v-model="queryParams.amortizationMonth" type="month" placeholder="请选择日期"
                          value-format='yyyy-MM' style="width: 100%;"/>
        </el-form-item>
      </el-col>
    </Search-content>

    <div class="card-wrap card-padding">
      <div class="table-title-wrap table-wrap">
        <div class="typeface">
          <div class="item">合计本月摊销：<span>{{ objData.sumAmount }}</span> 元</div>
          <div class="item">商业险本月摊销：<span>{{ objData.syxAmortizationAmount }}</span> 元</div>
          <div class="item">交强险本月摊销：<span>{{ objData.jqxAmortizationAmount }}</span> 元</div>
        </div>
        <el-button size="mini" v-hasPermi="['bxtx:amortizationList:derive']" @click="handleExport" type="primary">导出
        </el-button>
      </div>

      <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @setSizeCurrent="handleList" border>

        <template slot="tableCol">
          <el-table-column align="center" label="日期" show-overflow-tooltip min-width="100" prop="amortizationMonth">
            <template slot-scope="{row}">
              {{ row.amortizationMonth ? $dayjs(row.amortizationMonth).format('YYYY-MM-DD') : '' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="保险审核完成时间" show-overflow-tooltip min-width="140" prop="insuranceAuditingCompleteTime">
            <template slot-scope="{row}">
              {{ row.insuranceAuditingCompleteTime ? $dayjs(row.insuranceAuditingCompleteTime).format('YYYY-MM-DD') : '' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="车辆产权" show-overflow-tooltip min-width="160" prop="propertyRightName"/>

          <el-table-column align="center" label="车牌号" min-width="140" show-overflow-tooltip prop="carNo"/>

          <el-table-column align="center" label="车架号" min-width="180" show-overflow-tooltip prop="vinNo"/>

          <el-table-column align="center" label="交强险保险状态" show-overflow-tooltip min-width="130">
            <template #default="{row}">
              <span v-if="row.compulsoryInsuranceStatus == 0">交强险生效</span>
              <span v-if="row.compulsoryInsuranceStatus == 1">交强险失效</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="交强险保险生效日" show-overflow-tooltip min-width="130"
                           prop="compulsoryStartTime">
            <template #default="{row}">
              {{ row.compulsoryStartTime ? $dayjs(row.compulsoryStartTime).format('YYYY-MM-DD') : '' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="交强险金额(不含税)" min-width="150">
            <template #default="{row}">
              {{ row.compulsoryAllAmortization }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="交强险本月摊销" show-overflow-tooltip min-width="120"
                           prop="compulsoryShouldAmortization"/>

          <el-table-column align="center" label="交强险已摊销金额" show-overflow-tooltip min-width="130"
                           prop="compulsoryAlreadyAmortization"/>

          <!--          <el-table-column align="center" label="交强险已摊销月数" min-width="130" />-->

          <el-table-column align="center" label="交强险待摊销" show-overflow-tooltip min-width="100"
                           prop="compulsoryWaitAmortization"/>

          <el-table-column align="center" label="商业险保险状态" show-overflow-tooltip min-width="130">
            <template #default="{row}">
              <span v-if="row.commercialInsuranceStatus == 0">商业险生效</span>
              <span v-if="row.commercialInsuranceStatus == 1">商业险失效</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="商业险保险生效日" show-overflow-tooltip min-width="130"
                           prop="commercialStartTime">
            <template #default="{row}">
              {{ row.commercialStartTime ? $dayjs(row.commercialStartTime).format('YYYY-MM-DD') : '' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="商业险金额(不含税)" min-width="150">
            <template #default="{row}">
              {{ row.commercialAllAmortization }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="商业险本月摊销" show-overflow-tooltip min-width="120"
                           prop="commercialShouldAmortization"/>

          <el-table-column align="center" label="商业险已摊销金额" show-overflow-tooltip min-width="130"
                           prop="commercialAlreadyAmortization"/>

          <el-table-column align="center" label="商业险待摊销" show-overflow-tooltip min-width="120"
                           prop="commercialWaitAmortization"/>

          <!--          <el-table-column align="center" label="商业险已摊销月数" min-width="130" />-->

          <!--          <el-table-column align="center" label="商业险退保日期" show-overflow-tooltip min-width="130"-->
          <!--            prop="commercialStartTime">-->
          <!--            <template #default="{row}">-->
          <!--             -->
          <!--            </template>-->
          <!--          </el-table-column>-->

          <!--          <el-table-column align="center" label="商业险退保减少金额" min-width="150">-->
          <!--            <template #default="{row}">-->
          <!--              {{ format_thousand(row.commercialAllAmortization) }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->

        </template>
      </table-page>
    </div>
  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {getAmortizationList, getMonthCount} from "@/api/bxtx/amortization.js";
import {listDept} from "@/api/system/dept";

export default {
  name: "AmortizationList",
  dicts: ["amortization_status"],
  components: {
    SearchContent,
  },
  computed: {},
  watch: {},
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        amortizationMonth: "",
        commercialInsuranceStatus: "",
        compulsoryInsuranceStatus: "",
        carNo: "",
        vinNo: "",
        propertyRightId: ''
      },
      dataList: [],
      total: 0,
      loading: false,
      money: 0,
      companyOriginList: [],
      jqxTime: [],
      syxTime: [],
      objData: {
        sumAmount: 0,
        jqxAmortizationAmount: 0,
        syxAmortizationAmount: 0
      }
    };
  },
  created() {
    // this.handleNew()
    this.handleList();
    this.getCompanyOrigin();
  },
  mounted() {
  },
  methods: {
    changeDate(val, type) {
      if (val) {
        if (type === 1) {
        }
        if (type === 2) {
        }
      }
    },

    getCompanyOrigin() {
      listDept({
        deptType: "2", //组织类型（1部门 2公司）
        regionId: null, //所在城市（省市区id）
      }).then((res) => {
        this.companyOriginList = res.data;
      });
    },

    handleNew() {
      const now = new Date();
      const year = now.getFullYear();
      const month = this.padStart(now.getMonth() + 1);
      this.queryParams.amortizationMonth = `${year}-${month}`;
    },

    padStart(value) {
      return value.toString().padStart(2, "0");
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.handleList();
    },

    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        amortizationMonth: "",
        commercialInsuranceStatus: "",
        compulsoryInsuranceStatus: "",
        carNo: "",
        vinNo: "",
        propertyRightId: ''
      };
      this.handleList();
    },

    //导出
    handleExport() {
      this.download(
          "car/insuranceAmortization/export",
          {...this.queryParams},
          `保险摊销列表_${new Date().getTime()}.xlsx`
      );
    },

    //列表
    async handleList() {
      this.loading = true;
      try {
        const res = await getAmortizationList(this.queryParams);
        this.dataList = res.rows;
        this.total = res.total;
        this.handleGetMonthCount();
      } catch (e) {
        console.error("获取失败", e);
      } finally {
        this.loading = false;
      }
    },

    //合计
    handleGetMonthCount() {
      let obj = {
        amortizationMonth: this.queryParams.amortizationMonth,
        commercialInsuranceStatus: this.queryParams.commercialInsuranceStatus,
        compulsoryInsuranceStatus: this.queryParams.compulsoryInsuranceStatus,
        carNo: this.queryParams.carNo,
        vinNo: this.queryParams.vinNo,
        propertyRightId: this.queryParams.propertyRightId
      }
      getMonthCount(obj).then((res) => {
        this.objData = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.table-wrap {
  display: flex;
  justify-content: space-between;

  .typeface {
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
    sans-serif;
    font-weight: 650;
    display: flex;

    .item {
      padding-right: 30px;
    }

  }
}
</style>


